<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取元素</title>
</head>
<body>
    <div id="timer">时间</div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <span class="box">哈哈</span>
    <div class="small">盒子1</div>
    <div class="small">盒子2</div>
</body>
<script>
    // ①getElementById获取元素
    var timer = document.getElementById('timer')
    console.log(timer);
    // 使用·console.dir返回的是元素对象，更好查看里面的属性和方法
    console.dir(timer)
    // ②根据标签名获取元素getElementsByTagName
    // 返回的是元素对象的集合，以伪数组形式存储
    var lis = document.getElementsByTagName('li')
    console.log(lis);
    console.log(lis[0]);
    for(var i=0;i<lis.length;i++){
        console.log(lis[i]);
    }
    // ③通过HTML5新增方法获取（getElementByClassName）
    var  box = document.getElementsByClassName('box')
    console.log(box);
    // 返回指定选择器的第一个对象元素(querySelector)
    var small = document.querySelector('.small')
    console.log(small);
    // **返回指定选择器的所有元素对象（querySelectorAll）**取过来的对象是以伪数组形式存在
    var smalls  =document.querySelectorAll('.small')
    console.log(smalls);
    // 获取body元素
    var body = document.body
    console.log(body);
    // 获取html元素
    var ht = document.documentElement
    console.log(ht);
</script>
</html>